<template>
    <div id="message">
        <div id="title">
            <span>小学入学服务系统</span>
        </div>
        <div id="dear">
            <span>可爱的&nbsp;&nbsp;{{uname}}&nbsp;&nbsp;小朋友,你好</span>
            <button @click="tuichu()">退出</button>
        </div>
        <div id="container">
            <span id="c_title">信息采集</span>
            <div id="main">
                <div id="inputs">
                    <span id="i_title">姓名:</span>
                    <input type="text" :class="{disabled:uname}" v-model='uname' disabled>
                </div>
                <div id="inputs">
                    <span id="i_title">证件号码:</span>
                    <input type="text" :class="{disabled:uname}" v-model="ucid" disabled>
                </div>
                <div id="inputs">
                    <span id="i_title">出生日期:</span>
                    <input type="text" :class="{disabled:uname}" v-model="ubor" disabled>
                </div>
                <div id="inputs">
                    <span id="i_title">监护人姓名:</span>
                    <input type="text" :class="{disabled:usidsr}" v-model='gname' :disabled="gnamesr"><span class="ps1" :class="{psy:gnamey,psn:gnamen}"></span>
                </div>
                <div id="inputs">
                    <span id="i_title">监护人证件号:</span>
                    <input type="text" :class="{disabled:usidsr}" v-model='gcid' :disabled="gcidsr"><span class="ps1" :class="{psy:gcidy,psn:gcidn}"></span>
                </div>
                <div id="inputs">
                    <span id="i_title">监护人手机号:</span>
                    <input type="text" :class="{disabled:usidsr}" v-model="gphon" :disabled="gphonsr"><span class="ps1" :class="{psy:gphony,psn:gphonn}"></span>
                </div>
                <div id="inputs">
                    <span id="i_title">家庭住址:</span>
                    <input type="text" :class="{disabled:usidsr}" v-model="uaddress" :disabled="uaddresssr"><span class="ps1" :class="{psy:uaddressy,psn:uaddressn}"></span>
                </div>
                <div id="inputs">
                    <span id="i_title">选择学校:</span>
                    <input type="text" :class="{disabled:usidsr}" v-model="fieldValue" readonly label="地区" @click="show = true" :disabled="usidsr"><span class="ps1"></span>
                </div>
                <div id='tijiao'>
                    <button @click="tijiao()" :disabled="usidsr" class="btn" :class="{disabled:usidsr}">提交信息</button>
                </div>
                <van-popup v-model="xiaxian" id='tishi'>
                    <div>
                        <p>退出成功</p>
                        <button @click="close('gb1')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="tjcg" id='tishi'>
                    <div>
                        <p>提交成功</p>
                        <button @click="close('gb2')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="xmgs" id='tishi'>
                    <div>
                        <p>监护人姓名格式不正确</p>
                        <button @click="close('gb3')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="zjhgs" id='tishi'>
                    <div>
                        <p>监护人证件号格式不正确</p>
                        <button @click="close('gb4')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="sjhgs" id='tishi'>
                    <div>
                        <p>监护人手机号格式不正确</p>
                        <button @click="close('gb5')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="jtzz" id='tishi'>
                    <div>
                        <p>家庭住址未填写</p>
                        <button @click="close('gb6')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="xxxz" id='tishi'>
                    <div>
                        <p>未选择学校</p>
                        <button @click="close('gb7')">确定</button>
                    </div>
                </van-popup>
<van-popup v-model="show" round position="bottom">
  <van-cascader
    v-model="cascaderValue"
    title="请选择所在地区"
    :options="options"
    @close="show = false"
    @finish="onFinish"
  />
</van-popup>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show: false,
            fieldValue: '',
            cascaderValue: '',
            // 选项列表，children 代表子选项，支持多级嵌套
            options: [],
            uname:'',
            ucid:'',
            ubor:'',
            gname:'',
            gcid:'',
            gphon:'',
            uaddress:'',
            gnamesr:false,
            gcidsr:false,
            gphonsr:false,
            uaddresssr:false,
            usidsr:false,
            xiaxian:false,
            tjcg:false,
            gnamey:false,
            gnamen:false,
            gcidy:false,
            gcidn:false,
            gphony:false,
            gphonn:false,
            uaddressy:false,
            uaddressn:false,
            xmgs:false,
            zjhgs:false,
            sjhgs:false,
            jtzz:false,
            xxxz:false
        }
    },
    mounted(){
        var islogin=window.sessionStorage.getItem('islogin');
        var uid=islogin;
        this.axios.get(`/selectmessage?uid=${uid}`).then((result)=>{
            // console.log(result)
            // 把类别列表存入data， 
            // 在template中使用v-for遍历输出导航item
            var a= result.data.results
            this.uname=a[0].uname;
            // console.log(a.ucid)
            this.ucid=a[0].ucid;
            this.ubor=a[0].ubor;
            if(a[0].gname){
                this.gname=a[0].gname;
                this.gnamesr=true;
            }
            if(a[0].gcid){
                this.gcid=a[0].gcid;
                this.gcidsr=true;
            }
            if(a[0].gphon){
                this.gphon=a[0].gphon;
                this.gphonsr=true;
            }
            if(a[0].uaddress){
                this.uaddress=a[0].uaddress;
                this.uaddresssr=true
            }
            if(a[0].usid){
                this.usidsr=true;
                    this.axios.get(`/dnschool?usid=${a[0].usid}`).then((result)=>{
                        var a= result.data.results
                        this.fieldValue=a[0].sname
                    });
            }
        });
        if(!islogin || islogin=='false'){
            this.$router.push('/login')
        }
        this.axios.get('/selectplot').then((result)=>{
            var a= result.data.results
            // console.log(result.data.results)
            a.forEach(item => {
                // console.log(item.pname)
                // console.log(item)
                var b={
                    text:item.pname,
                    value:item.pid,
                    children:[]
                }
                this.options.push(b)
                // console.log(this.options)
            });
        });
    },
    methods: {
    // 全部选项选择完毕后，会触发 finish 事件
        onFinish({ selectedOptions }) {
            this.show = false;
            this.fieldValue = selectedOptions.map((option) => option.text).join('/');
        },
        tijiao(){
            if(this.gnamey==false){
                this.xmgs=true;
                this.gname='';
            }else if(this.gcidy==false){
                this.zjhgs=true;
                this.gcid='';
            }else if(this.gphony==false){
                this.sjhgs=true;
                this.gphon='';
            }else if(!this.uaddress){
                this.jtzz=true;
            }else if(!this.cascaderValue){
                this.xxxz=true;
            }else{
                this.axios.get(`/messageset?gname=${this.gname}&gphon=${this.gphon}&gcid=${this.gcid}&uaddress=${this.uaddress}&usid=${this.cascaderValue}&ucid=${this.ucid}`).then((result)=>{
                    console.log(result.data.code);
                    if(result.data.code==200){
                        this.tjcg=true;
                    }
                });
            }
            
        },
        tuichu(){
            window.sessionStorage.setItem('islogin','false');
            this.xiaxian=true;
        },
        close(e){
            if(e=='gb1'){
                this.xiaxian=false;
            }else if(e=='gb2'){
                this.tjcg=false;
            }else if(e=='gb3'){
                this.xmgs=false;
            }else if(e=='gb4'){
                this.zjhgs=false;
            }else if(e=='gb5'){
                this.sjhgs=false;
            }else if(e=='gb6'){
                this.jtzz=false;
            }else if(e=='gb7'){
                this.xxxz=false;
            }
        }
    },
    watch:{
        cascaderValue(nawval){
            this.axios.get(`/selectschool?spid=${nawval}`).then((result)=>{

            var a= result.data.results
            a.forEach(item => {
                var b={
                    text:item.sname,
                    value:item.sid
                }
                this.options[nawval-1].children.push(b);
            });
            });
        },
        xiaxian(nawval){
            if(nawval==false){
                this.$router.push('/login')
            }
        },
        tjcg(nawval){
            if(nawval==false){
                location.reload();
            }
        },
        gname(nawval){
            var rst=/^[\u4e00-\u9fa5]{2,8}$/i;
            var res=rst.test(nawval);
            if(res==true){
                this.gnamey=true;
                this.gnamen=false
            }else{
                this.gnamey=false;
                this.gnamen=true;
            }
        },
        gcid(nawval){
            var rst=/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/i;
            var res=rst.test(nawval);
            if(res==true){
                this.gcidy=true;
                this.gcidn=false;
            }else{
                this.gcidy=false;
                this.gcidn=true;
            }
        },
        gphon(nawval){
            var rst=/^\d{11}$/g;
            var res=rst.test(nawval);
            if(res==true){
                this.gphony=true;
                this.gphonn=false;
            }else{
                this.gphony=false;
                this.gphonn=true;
            }
        },
        
    }
}
</script>
<style scoped>
*{
    margin: 0;
    padding:0;
}
#container{
    width:90%;
    padding-top: 5vw;
    padding-left: 5vw;
    background-color: rgb(250,250,250);
}
#title{
    color: #bc272e;
    font-size: 9vw;
    text-align: center;
    padding: 10vw 0;
    border-bottom: 0.1vw solid grey;
}
#dear{
    width: 90%;
    height: 10vw;
    background-color: #bc272e;
    padding: 0 5vw;
    display: flex;
    justify-content: space-between
}
#dear>button{
    border: none;
    background-color: #bc272e;
    color: white;
    width: 10%;
}
#dear>span{
    color: white;
    line-height: 10vw;
    font-size: 4vw;
}
#c_title{
    display: inline-block;
    width: 20%;
    line-height: 8vw;
    text-align: center;
    border-radius: 2vw 2vw 0 0 ;
    background-color: rgb(245, 233, 235);
}
#main{
    width:90%;
    /* margin-top:5vw ;
    margin-left: 5%; */
    padding-top:5vw ;
    /* text-align: center; */
    border-top: 0.1vw solid rgb(245, 233, 235);
    background-color: white;
}
#inputs{
    margin: 2vw 0;
}
#i_title{
    text-align: right;
    display: inline-block;
    width: 35%;
    margin-right: 2vw;
}
#inputs>input{
    width: 50%;
    height: 6vw;
    border: 0.1vw solid black;
}
#tijiao{
    margin: 5vw 0;
    text-align: center;    
}
.btn{
    width: 50%;
    height: 10vw;
    border-radius: 2vw;
    background-color: #bc272e;
    color: white;
}
.disabled{
    color: rgb(66, 66, 66);
    background-color: rgb(181, 181, 181);
}
#tishi{
    width: 90%;
    height: 20%;
    text-align: center;
    border-radius: 5vw;
}
#tishi>div{
    height: 100%;
}
#tishi>div>p{
    margin-left: 10%;
    width: 80%;
    line-height: 400%;
    font-size: 5vw;
    border-bottom: 0.1vw solid grey;
}
#tishi>div>button{
    width: 80%;
    height: 35%;
    border: none;
    background-color: white;
}
.ps1{
    display: inline-block;
    height: 5vw;
    width: 10%;
    background-repeat: no-repeat;
    background-position:center center;
}
.psy{
    background-image: url('../assets/yes.png');
}
.psn{
    background-image: url('../assets/no.png');
}
</style>